<template>
  <div>
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <TreeTools :node-data="companyInfo" :is-company="true" @addDept="addDeptData" />
      <hr>
      <!-- 这里时树形结构布局 -->
      <!-- expand-on-click-node="false"点击该列不让树形结构收缩，使得它不与下拉框冲突 -->
      <el-tree
        :data="depes"
        :props="{label:'name'}"
        :default-expand-all="true"
        :expand-on-click-node="false"
      >
        <!-- 插槽的使用，使得操作数据更加自由 -->
        <!-- scoped有两个参数，node和data -->
        <!-- <template v-slot="scoped">
          {{ scoped.data.name }}
          @updataDeptData="loadPage" 需要绑定再使用的组件上
        </template> -->
        <template v-slot="scoped">
          <TreeTools
            :node-data="scoped.data"
            :is-company="false"
            @addDept="addDeptData"
            @editDept="editDeptData"
            @updataDeptData="loadPage"
          />
        </template>
      </el-tree>
    </el-card>
    <!-- 弹窗 -->
    <AddDept
      ref="DeptsDateil"
      :is-show-dialog="isShowDialog"
      :node-data="nodeData"
      @closeAddDept="isShowDialog=false"
      @updataDeptData="loadPage"
    />
  </div>
</template>
<script>
import { getDepartmentList } from '@/api/departments'
// 弹窗
import AddDept from './components/add-dept.vue'
import TreeTools from './components/tree-tools.vue'
import { listToTreeData } from '@/utils/index'
export default {
  name: '',
  components: { TreeTools, AddDept },
  props: {
  },
  data() {
    return {
      // 默认element-ui组件规定，数据名称为label和children，如果时从后台拿数据的话，就有可能不是label和children，需要重定向数据绑定的形式，可以通过，prors更改 例如：:props="{label:'name'}"
      depes: [
        { name: '总裁办', manager: '小王' },
        { name: '人事部' },
        { name: '技术部',
          children: [
            { name: '前端', manager: '大王' },
            { name: '后端端' }
          ] },
        { name: '销售部',
          children: [
            { name: '电话销售' },
            { name: '地推销售', manager: '小小王' }
          ] }
      ],
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      isShowDialog: false,
      nodeData: {}
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.loadPage()
  },
  mounted() {
  },
  methods: {
    async loadPage() {
      const { depts } = await getDepartmentList()
      // console.log(62, depts)
      this.depes = listToTreeData(depts, '')
    },
    // 弹窗
    addDeptData(nodeData) {
      this.isShowDialog = true
      // console.log(81, nodeData)
      this.nodeData = nodeData
    },
    // 编辑的弹窗
    async editDeptData(nodeData) {
      // 此时我们需要拿到点击准确的编辑按钮的这一整条数据，这个是从子子组件传递过来的
      // console.log(95, nodeData)
      // 传递树形子组件传递过来的id，再传递给弹窗的组件，放入到函数中，用于获取数据
      await this.$refs.DeptsDateil.getDeptsDateil(nodeData.id)
      this.isShowDialog = true
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
<style scoped lang='less'>
</style>
